<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Menus &amp; toolbars</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, menu, toolbar, Swing, programming, JRuby, Linux">
<meta name="description" content="In this part of the JRuby Swing tutorial, we work 
with menus &amp; toolbars">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Menus &amp; toolbars</h1>

<p>
In this part of the JRuby Swing programming tutorial, we will 
work with menus and toolbar. 
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 

<p>
A menubar is one of the most visible parts of the GUI application. 
It is a group of commands located in various menus. While in console 
applications you had to remember all those arcane commands, here we have 
most of the commands grouped into logical parts. There are accepted standards
that further reduce the amount of time spending to learn a new application.
Menus group commands that we can use in an application. 
Toolbars provide a quick access to the most frequently used commands.
</p>


<h2>Simple menu</h2>

<p>
The first example will show a simple menu. 
</p>

<pre class="code">
#!/usr/local/bin/jruby

# ZetCode JRuby Swing tutorial
#
# This program creates a simple
# menu.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: December 2010

include Java

import java.awt.event.KeyEvent
import javax.swing.JButton
import javax.swing.JFrame
import javax.swing.JMenuBar
import javax.swing.JMenuItem
import javax.swing.JMenu
import javax.swing.ImageIcon
import java.lang.System


class Example &lt; JFrame
  
    def initialize
        super "Simple menu"
        
        self.initUI
    end
      
    def initUI
      
        menubar = JMenuBar.new
        icon = ImageIcon.new "exit.png"

        fileMenu = JMenu.new "File"
        fileMenu.setMnemonic KeyEvent::VK_F

        itemExit = JMenuItem.new "Exit", icon
        itemExit.addActionListener do |e|
            System.exit 0
        end
        
        itemExit.setMnemonic KeyEvent::VK_C
        itemExit.setToolTipText "Exit application"

        fileMenu.add itemExit

        menubar.add fileMenu

        self.setJMenuBar menubar  
        
        self.setDefaultCloseOperation JFrame::EXIT_ON_CLOSE
        self.setSize 250, 200
        self.setLocationRelativeTo nil
        self.setVisible true
    end
end

Example.new
</pre>

<p>
Our example will show a menu with one item. By selecting the 
exit menu item we close the application. 
</p>

<pre class="explanation">
menubar = JMenuBar.new
</pre>

<p>
Here we create a menubar.
</p>

<pre class="explanation">
icon = ImageIcon.new "exit.png"
</pre>

<p>
We will display an icon in the menu item.
</p>

<pre class="explanation">
fileMenu = JMenu.new "File"
fileMenu.setMnemonic KeyEvent::VK_F
</pre>

<p>
We create a menu object. A menu is a popup window containing <code>JMenuItem</code>s.
Menus are located on the menubar. The menus can be accessed via the keyboard as well. 
To bind a menu to a particular key, we use the <code>setMnemonic</code> method. In our case, 
the menu can be opened with the ALT + F shortcut.
</p>

<pre class="explanation">
itemExit = JMenuItem.new "Close", icon
itemExit.addActionListener do |e|
    System.exit 0
end
</pre>

<p>
Here we create a <code>JMenuItem</code>. A menu item is an object shown in
a popup window of the selected menu. We also provide a shortcut for the menu
item and a tooltip as well. 
</p>

<pre class="explanation">
fileMenu.add itemExit
</pre>

<p>
A menu item is added to the menu. 
</p>

<pre class="explanation">
menubar.add fileMenu
</pre>

<p>
A menu is added to the menubar. 
</p>

<img src="/img/gui/jythonswing/simplemenu.png" alt="Simple menu">
<div class="figure">Figure: Simple menu</div>


<h2>Submenu</h2>

<p>
A submenu is a menu plugged into another menu object. 
The next example demonstrates this. 
</p>

<pre class="code">
#!/usr/local/bin/jruby

# ZetCode JRuby Swing tutorial
#
# This program creates a 
# submenu.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: December 2010


include Java

import java.awt.event.KeyEvent
import java.awt.event.ActionEvent
import javax.swing.JFrame
import javax.swing.ImageIcon
import javax.swing.JMenuBar
import javax.swing.JMenu
import javax.swing.JMenuItem
import javax.swing.KeyStroke
import java.lang.System


class Example &lt; JFrame
    
    def initialize
        super "Submenu"
        
        self.initUI
    end
      
    def initUI
      
        menubar = JMenuBar.new

        iconNew = ImageIcon.new "new.png"
        iconOpen = ImageIcon.new "open.png"
        iconSave = ImageIcon.new "save.png"
        iconExit = ImageIcon.new "exit.png"

        fileMenu = JMenu.new "File"
        fileMenu.setMnemonic KeyEvent::VK_F

        imp = JMenu.new "Import"
        imp.setMnemonic KeyEvent::VK_M

        newsf = JMenuItem.new "Import newsfeed list..."
        bookm = JMenuItem.new "Import bookmarks..."
        mail = JMenuItem.new "Import mail..."

        imp.add newsf
        imp.add bookm
        imp.add mail

        fileNew = JMenuItem.new "New", iconNew
        fileNew.setMnemonic KeyEvent::VK_N

        fileOpen = JMenuItem.new "Open", iconOpen
        fileNew.setMnemonic KeyEvent::VK_O

        fileSave = JMenuItem.new "Save", iconSave
        fileSave.setMnemonic KeyEvent::VK_S

        fileExit = JMenuItem.new "Exit", iconExit
        fileExit.addActionListener do |e|
            System.exit 0
        end
        
        fileExit.setMnemonic KeyEvent::VK_C
        fileExit.setToolTipText "Exit application"
        fileExit.setAccelerator KeyStroke.getKeyStroke KeyEvent::VK_W,
            ActionEvent::CTRL_MASK

        fileMenu.add fileNew
        fileMenu.add fileOpen
        fileMenu.add fileSave
        fileMenu.addSeparator
        fileMenu.add imp
        fileMenu.addSeparator
        fileMenu.add fileExit

        menubar.add fileMenu

        self.setJMenuBar menubar
        
        self.setDefaultCloseOperation JFrame::EXIT_ON_CLOSE
        self.setSize 320, 220
        self.setLocationRelativeTo nil
        self.setVisible true
    end   
end

Example.new
</pre>

<p>
In the example, we have three options in a submenu of a file menu. 
</p>


<pre class="explanation">
imp = JMenu.new "Import"
...
fileMenu.add imp
</pre>

<p>
A submenu is just like any other normal menu. It is created the 
same way. We simply add a menu to existing menu.
</p>

<pre class="explanation">
fileExit.setAccelerator KeyStroke.getKeyStroke KeyEvent::VK_W,
            ActionEvent::CTRL_MASK
</pre>

<p>
An accelerator is a key shortcut that launches a menu item. 
In our case, by pressing Ctrl + W we close the application.
</p>

<pre class="explanation">
fileMenu.addSeparator
</pre>

<p>
A separator is a horizontal line that visually separates the menu items. 
This way we can group items into some logical places.
</p>

<img src="/img/gui/jythonswing/submenu.png" alt="Submenu">
<div class="figure">Figure: Submenu</div>


<h2>Popup menu</h2>

<p>
In the next example, we create a popup menu. 
</p>

<pre class="code">
#!/usr/local/bin/jruby

# ZetCode JRuby Swing tutorial
#
# This program creates a 
# popup menu.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: December 2010


include Java

import java.awt.event.MouseAdapter
import javax.swing.JFrame
import javax.swing.JPopupMenu
import javax.swing.JMenuItem
import java.lang.System


class MouseAction &lt; MouseAdapter
  
    def mouseReleased e
        source = e.source
        menu = source.getMenu
        
        if e.getButton == e.button
            menu.show e.getComponent, e.getX, e.getY
        end
    end  
end    

class Example &lt; JFrame
    
    def initialize
        super "Popup menu"
        
        self.initUI
    end
      
    def initUI
      
        @menu = JPopupMenu.new
        menuItemBeep = JMenuItem.new "Beep" 
        menuItemBeep.addActionListener do |e|
            toolkit = getToolkit
            toolkit.beep              
        end
        @menu.add menuItemBeep

        menuItemExit = JMenuItem.new "Exit" 
        menuItemExit.addActionListener do |e|
            System.exit 0    
        end 
        
        @menu.add menuItemExit
        self.addMouseListener MouseAction.new
        
        self.setDefaultCloseOperation JFrame::EXIT_ON_CLOSE
        self.setSize 250, 200
        self.setLocationRelativeTo nil
        self.setVisible true
    end
    
    def getMenu
        @menu
    end    
end

Example.new
</pre>

<p>
In our example, we create a popup menu with two 
menu items. 
</p>

<pre class="explanation">
@menu = JPopupMenu.new
menuItemBeep = JMenuItem.new "Beep"
</pre>

<p>
We create a popup menu and a menu item. 
</p>

<pre class="explanation">
self.addMouseListener MouseAction.new
</pre>

<p>
We add a mouse listener to the Example class. The mouse listener
is a MouseAction user defined class, which inherits from a 
<code>MouseAdapter</code>. It is a convenience class which implements
all five required methods. The methods are empty. Instead of implementing
all five methods, we implement only the methods, that we need. 
</p>

<pre class="explanation">
class MouseAction &lt; MouseAdapter
  
    def mouseReleased e
...
</pre>

<p>
In our MouseAction class we implement the <code>mouseReleased</code> method.
</p>

<pre class="explanation">
if e.getButton == e.button:
    menu.show e.getComponent, e.getX, e.getY
end
</pre>

<p>
We show the popup menu window at the x, y coordinates of
the mouse click. 
</p>

<img src="/img/gui/jythonswing/popupmenu.png" alt="Popup menu`">
<div class="figure">Figure: Popup menu</div>


<h2>JToolbar</h2>

<p>
Menus group commands that we can use in an application. Toolbars provide 
a quick access to the most frequently used commands. In Swing, the 
<code>JToolBar</code> class creates a toolbar in an application.
</p>

<pre class="code">
#!/usr/local/bin/jruby


# ZetCode JRuby Swing tutorial
#
# This program creates a 
# toolbar.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: December 2010


include Java

import java.awt.BorderLayout
import javax.swing.JFrame
import javax.swing.ImageIcon
import javax.swing.JButton
import javax.swing.JMenuBar
import javax.swing.JMenu
import javax.swing.JToolBar
import java.lang.System



class Example &lt; JFrame
    
    def initialize
        super "Toolbar"
        
        self.initUI
    end
      
    def initUI
      
        menubar = JMenuBar.new
        fileMenu = JMenu.new "File"
        menubar.add fileMenu

        toolbar = JToolBar.new

        iconExit = ImageIcon.new "exit2.png"

        exitButton = JButton.new iconExit
        exitButton.addActionListener do |e|
            System.exit 0  
        end
        
        toolbar.add exitButton

        self.add toolbar, BorderLayout::NORTH

        self.setJMenuBar menubar
        
        self.setDefaultCloseOperation JFrame::EXIT_ON_CLOSE
        self.setSize 350, 250
        self.setLocationRelativeTo nil
        self.setVisible true
    end       
end

Example.new
</pre>

<p>
The example creates a toolbar with one exit button.
</p>

<pre class="explanation">
toolbar = JToolBar.new
</pre>

<p>
A toolbar is created.
</p>

<pre class="explanation">
exitButton = JButton.new iconExit
...
toolbar.add exitButton
</pre>

<p>
We create a button and add it to the toolbar.
</p>

<pre class="explanation">
self.add toolbar, BorderLayout::NORTH
</pre>

<p>
The toolbar is placed into the north part of the <code>BorderLayout</code>
manager. The <code>BorderLayout</code> manager is the default layout manager
for the <code>JFrame</code> container.
</p>


<img src="/img/gui/jythonswing/toolbar.png" alt="Toolbar">
<div class="figure">Figure: Toolbar</div>


<p>
In this part of the JRuby Swing tutorial, we mentioned menus and toolbars. 
</p>


<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>

<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified December 22, 2010  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

